<template>
    <div class="content">
        <div class="tabClass">
            <div :class="{'tabItem': activeTab == 0, 'notabItem': activeTab !== 0}" @click="activeTab=0;getTableData();">发布公司视频</div>
            <div :class="{'tabItem': activeTab == 1, 'notabItem': activeTab !== 1}"  @click="activeTab=1;getProductList();">管理公司视频</div>
        </div>
        <div v-if="activeTab == 0">
            <div  class="flex-start m-t-37">
                <div class="label">
                    <span  class="red">*</span>
                    <span>视频:</span>
                </div>
                <div>
                    <el-upload
                        drag
                         accept=".mp4"
                      class="upload-demo"
                      action=""
                      :http-request="customUpload"
                      :on-success="handleLogoSuccess"
                      :on-error="handleLogoError"
                      :on-remove="handleRemove" 
                      :file-list="fileList">
                      <i class="el-icon-upload" ></i>
                      <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
                    </el-upload>
                    <div class="tips">文件大小不超过10MB；格式支持：.mp4</div>
                </div>
            </div>
            <div  class="flex-start m-t-17">
                <div class="label">
                    <span  class="red">*</span>
                    <span>名称:</span>
                </div>
                <input type="text" v-model="productSelect.title" placeholder="请输入"></input>
            </div>
            
            <div  class="flex-start m-t-24">
                <div class="label">
                    <span> </span>
                </div>
                <div class="flex-start">
                    <div class="btnCancel">取消</div>
                    <div class="btnSave" @click="saveData">发布</div>
                </div>
            </div>
        </div>

        <div v-if="activeTab == 1">

            <div class="table-handle">
                <div class="w1">图片</div>
                <div class="w2">名称</div>
                <div class="w3">操作</div>
            </div>
            <div class="table-cell-content" v-for="item in productList" :key="item.id">
                <div class=" w1">
                        <!-- <img class="productImg" :src="getFistImg(item)" alt=""/> -->
                        <video class="productImg" controls :src="item.file_path">
                            你的浏览器不支持播放器.
                        </video>
                </div>
                <div class="productText w2">{{ item.title }}</div>
                <div class="flex-start w3">
                    <div class="operateText"  @click="editProductDetail(item)">编辑</div>
                    <div class="operateText" @click="deleteProductDiaglog(item)">删除</div>
                </div>
            </div>
            <div class="pageClass" v-if="productList.length>0">
                <div class="pageClass-first" @click="LoadFistData">首页</div>
                <div class="pageClass-Last"  @click="LoadLastData">上一页</div>
                <template v-if="totalPage < 6">
                    <div :class="{'pageClass-num':true, 'active': currentPage == 1 }" @click="loadPageData(1)" v-if="totalPage >= 1" >1</div>
                    <div :class="{'pageClass-num':true, 'active': currentPage == 2 }" @click="loadPageData(2)" v-if="totalPage >= 2">2</div>
                    <div  :class="{'pageClass-num':true, 'active': currentPage == 3 }" @click="loadPageData(3)"  v-if="totalPage >= 3">3</div>
                    <div  :class="{'pageClass-num':true, 'active': currentPage == 4 }" @click="loadPageData(4)"  v-if="totalPage >= 4">4</div>
                    <div  :class="{'pageClass-num':true, 'active': currentPage == 5 }" @click="loadPageData(5)" v-if="totalPage >= 5">5</div>
                    <div  :class="{'pageClass-num':true, 'active': currentPage == 6 }" @click="loadPageData(6)"  v-if="totalPage >= 6">6</div>
                </template>
                <template v-else>
                    <div :class="{'pageClass-num':true, 'active': currentPage == 1 }" @click="loadPageData(1)">1</div>
                    <div :class="{'pageClass-num':true, 'active': currentPage == 2 }" @click="loadPageData(2)">2</div>
                    <div class="pageShenLue" >...</div>
                    <div  :class="{'pageClass-num':true, 'active': currentPage == totalPage-1 }" @click="loadPageData(totalPage-1)">{{ totalPage-1 }}</div>
                    <div  :class="{'pageClass-num':true, 'active': currentPage == totalPage }"  @click="loadPageData(totalPage)">{{ totalPage }}</div>
                </template>
                <div  class="pageClass-Last" @click="LoadNextData">下一页</div>
                <div  class="pageClass-first"  @click="LoadEndData">末页</div>
            </div>

            <div v-if="productList.length == 0" class="noData">暂无数据</div>
        </div>

        <el-dialog
          title="提示"
          :visible.sync="deleteProductVisible"
          width="30%"
         >
          
          <div class="flex-start">
            <div class="labelName" style="width:100%;text-align: center;">{{ deleteTips }}</div>
          </div>

          <div  class="el-dialog-footer dialog-footer" style="padding-bottom:31px">
            <div class="cancleClass" @click="deleteProductVisible = false">取 消</div>
            <div class="addBtnClass" @click="deleteProduct">确 定</div>
          </div>
        </el-dialog>

    </div>
</template>

<script>
import { mapState } from "vuex";
import axios from "axios";

export default {
    computed: {
        ...mapState([
          "userInfo",
          'token'
        ]),
    },
    data(){
        return{
            activeTab:0,
            tableData:[],
            catOptionsList:[],
            options:[],
            productList:[],
            totalPage:0,
            currentPage:1,
            productSelect:{
                file_path:'',
                title:'',
            },
            fileList:[],
            deleteProductVisible:false,
            deleteTips:'此操作将永久删除该视频, 是否继续?',
            deleteList:[],
        }
    },
    watch:{

    },
    created(){
        this.getProductList();
        this.getCatList();
    },
    methods:{
        getFistImg(item){
            try{
                let temp = JSON.parse(item.file_path);
                if(temp.length>0){
                    return temp[0].file_url;
                } else {
                    return'';
                }
            } catch(e)  {
                return '';
            }
        },
        getProductList(){
            this.$httpApi("/api/getCompanyPhotoList", {
                    token:this.token,
                    page:this.currentPage,
                    limit:10,
                    file_type:2,
                }, "get").then(res =>{
                    if(res.code == 200){
                        this.productList = res.data.list;
                        this.totalPage = Math.ceil(res.data.count / 10);
                    }else{
                      alertErr(res.msg);
                    }
                })
        },
        getCatList(){
            this.$httpApi("/api/getProductCat", {
                token:this.token
            }, "get").then(res =>{
                if(res.code == 200){
                    this.catOptionsList = res.data;
                }else{
                  alertErr(res.msg);
                }
            })
        },
        async customUpload({ file, onProgress, onSuccess, onError }){
            const loading = this.$loading({
              lock: true,
              text: '上传文件中，请稍后',
              spinner: 'el-icon-loading',
              background: 'rgba(0, 0, 0, 0.7)'
            });
            const formData = new FormData();
            formData.append("file", file);
            formData.append("token", this.token);
            try{
                const response = await axios.post("/api/upload", formData, {
                  headers: { "Content-Type": "multipart/form-data" },
                  onUploadProgress: (progressEvent) => {
                    if (progressEvent.lengthComputable) {
                      const progress = Math.round((progressEvent.loaded * 100) / progressEvent.total);
                      onProgress({ percent: progress }); // 更新进度条
                    }
                  },
                });
                loading.close();
                console.log(response,'edededede')
                if(response.code == 200) {
                    onSuccess(response.data); // 通知组件上传成功
                } else {
                    alertErr(response.msg)
                }
                
            } catch (error) {
                loading.close();
               // onError(error); // 通知组件上传失败
               alertErr('上传失败');
            }
        },
        handleLogoSuccess(response, file, fileList){
            console.log(response, file, fileList,'response, file, fileList')
            if(response){
                this.productSelect.file_path = response.url;
                this.fileList=[{
                    name:file.name,
                    url:response.url,
                }]
                file.file_url = response.url;
            }
        },
        handleLogoError(error, file, fileList){
            console.log(error, file, fileList)
        },
        handleRemove(file, fileList){
            this.fileList = [];
            this.productSelect.file_path = '';
        },
        saveData(){
            if(this.productSelect.file_path == ''){
                alertErr('请上传视频')
                return;
            }
            if(this.productSelect.title == ''){
                alertErr('请输入名称')
                return;
            }

            if(this.productSelect.id) {
                //更新产品
                this.$httpApi("/api/updateCompanyPhoto", {
                    id:this.productSelect.id,
                    file_path:this.productSelect.file_path,
                    title:this.productSelect.title,
                    file_type: 2,
                    token:this.token
                },'post').then(res =>{
                    if(res.code == 200){
                        alertSucc('保存成功'); 
                        this.productSelect={
                            file_path:'',
                            title:'',
                            file_type: 2,
                        };
                        this.fileList=[]
                    } else{
                      alertErr(res.msg);
                    }
                })
            } else {
                //新增
                this.$httpApi("/api/addCompanyPhoto", {
                    file_path:this.productSelect.file_path,
                    title:this.productSelect.title,
                    file_type: 2,
                    token:this.token
                }, "post").then(res =>{
                    if(res.code == 200){
                        alertSucc('保存成功');
                        this.productSelect={
                            file_path:'',
                            title:'',
                            file_type: 2,
                        };
                        this.fileList=[]
                    }else{
                      alertErr(res.msg);
                    }
                })
            }
            
        },
        deleteProductDiaglog(item){
            this.deleteList = [];
            this.deleteTips = '此操作将永久删除该视频, 是否继续?';
            this.deleteList = [item.id];
            this.deleteProductVisible = true;
        },
        deleteProduct(){
            this.$httpApi("/api/delCompanyPhoto", {
                id:this.deleteList.join(','),
                token:this.token 
            },'post').then(res =>{
                if(res.code == 200){
                    alertSucc('删除成功');
                    this.getProductList();
                    this.deleteList = [];
                    this.deleteProductVisible=false;
                }else{
                  alertErr(res.msg);
                }
            })
        },
        LoadFistData(){
            this.currentPage = 1;
            this.getProductList();
        },
        LoadLastData(){
            if(this.currentPage > 1){
                this.currentPage --;
                this.getProductList();
            }
        },
        LoadNextData(){
            if(this.currentPage < this.totalPage){
                this.currentPage ++;
                this.getProductList();
            }
        },
        LoadEndData(){
            this.currentPage = this.totalPage;
            this.getProductList();
        },
        loadPageData(val){
            this.currentPage = val;
            this.getProductList();
        },
        editProductDetail(item){
            
            this.fileList = [{
                name:new Date().getTime()+'.mp4',
                url:item.file_path,
            }];
            this.productSelect = item;
            this.activeTab = 0;
        },

    }
}
</script>

<style scoped lang="less">
.content{
    padding-left: 31px;
    padding-right: 31px;
    background: #FFFFFF;

    .tabClass{
        height: 60px;
        display: flex;
    }
    .tabItem{
        width: 448px;
        border-bottom: 1px solid #31A41B;
        height: 60px;
        font-weight: 500;
        font-size: 16px;
        color: #31A41B;
        line-height: 60px;
        text-align: center;
        cursor: pointer;
    }
    .notabItem{
        width: 448px;
        height: 60px;
        font-weight: 400;
        font-size: 14px;
        color: #333333;
        line-height: 18px;
        text-align: right;
        line-height: 60px;
        text-align: center;
        border-bottom: 1px solid #E2E2E2;
        cursor: pointer;
    }
    .m-t-37{
        margin-top: 37px;
    }

    .priceInput{
        width: 130px;
    }
    .m-10{
        margin-right: 10px;
        margin-left: 10px;
    }

    .m-t-29{
        margin-top: 29px;
    }

    .addClass{
        width: 78px;
        height: 32px;
        background: #31A41B;
        border-radius: 4px 4px 4px 4px;
        font-weight: 400;
        font-size: 14px;
        color: #FFFFFF;
        line-height: 32px;
        text-align: center;
        cursor: pointer;
    }

    .table-header{
        height: 50px;
        background: #F5F5F5;
        margin-top: 10px;
        font-family: Microsoft YaHei, Microsoft YaHei;
        font-weight: 400;
        font-size: 14px;
        color: #666666;
        display: flex;
        line-height: 50px;
    }

    .w1{
        width: 25%;
        text-align: left;
        margin-left: 32px;
    }
    .w2{
        width: 55%;
        text-align: left;
    }
    .w3{
        width: 20%;
        text-align: left;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .editClass{
        font-weight: 400;
        font-size: 14px;
        color: #4A4A4A;
        line-height: 0px;
        text-decoration-line: underline;
        margin-right: 24px;
        cursor: pointer;
        line-height: 20px;
    }
    .deleteClass{
        font-weight: 400;
        font-size: 14px;
        color: #FF0000;
        text-decoration-line: underline;
        cursor: pointer;
        line-height: 20px;
    }

    .table-cell{
        height: 56px;
        background: #fff;
        font-weight: 400;
        font-size: 14px;
        color: #4A4A4A;
        display: flex;
        line-height: 56px;
        border-bottom: 1px solid #E2E2E2;
    }

    .labelName{
        width: 80px;
        text-align: right;
        margin-right: 10px;
    }
    .noData{
        padding: 40px;
        font-weight: 400;
        font-size: 14px;
        color: #666666;
        text-align: center;
    }
    /deep/ .el-dialog__header{
        background: #F7F7F7;
        .el-dialog__title{
            font-weight: 400;
            font-size: 18px;
            color: #333333;
        }
    }
    .m-t-24{
        margin-top: 24px;
    }
    .cancleClass{
        width: 133px;
        height: 40px;
        border-radius: 4px 4px 4px 4px;
        border: 1px solid #D5DBE8;
        font-weight: 400;
        font-size: 14px;
        color: #333333;
        text-align: center;
        line-height: 40px;
        margin-right: 20px;
        margin-left: 80px;
        cursor: pointer;
    }
    .addBtnClass{
        width: 133px;
        height: 40px;
        border-radius: 4px 4px 4px 4px;
        background: #31A41B;
        font-weight: 400;
        font-size: 14px;
        color: #fff;
        text-align: center;
        line-height: 40px;
        cursor: pointer;
    }
    .dialog-footer{
        display: flex;
    }
    .el-dialog-footer{
        padding-top:32px;
        padding-bottom: 71px;
    }
    /deep/.el-button--primary{
        background: #31A41B;
    }
    .w167{
        width: 167px;
    }
    .table-handle{
        height: 50px;
        background: #F5F5F5;
        margin-top: 12px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-top: 29px;
    }
    .checkedClass{
        width: 16px;
        height: 16px;
        cursor: pointer;
    }
    .recommandClass{
        width: 78px;
        height: 32px;
        background: #31A41B;
        border-radius: 4px 4px 4px 4px;
        font-weight: 400;
        font-size: 14px;
        color: #FFFFFF;
        line-height: 32px;
        text-align: center;
        cursor: pointer;
        margin-right: 10px;
    }
    .deletebtn{
        width: 50px;
        height: 32px;
        background: #FF8888;
        border-radius: 4px 4px 4px 4px;
        font-weight: 400;
        font-size: 14px;
        color: #FFFFFF;
        line-height: 32px;
        text-align: center;
        cursor: pointer;
    }
    .flex-center{
        display: flex;
        align-items: center;
        height: 100%;
    }
    .m-l-40{
        margin-left: 40px;
    }
    .m-l-13{
        margin-left: 13px;
    }

    .searchClass{
        width: 220px;
        height: 32px;
        background: #FFFFFF;
        border-radius: 4px 4px 4px 4px;
        border: 1px solid #C4C4C4;
        position: relative;
        margin-right: 24px;
        input{
            width: 100%;
            height: 100%;
            border-radius: 4px 4px 4px 4px;
            border:0px solid #C4C4C4;
            background:#fff;
        }
        i{
            font-size: 18px;
            position: absolute;
            right: 10px;
            line-height: 32px;
        }
    }

    .table-cell-content{
        height: 200px;
        border-bottom: 1px solid #EBEEF5;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }
    .productImg{
        width: 200px;
        height: 150px;
    }
    .productText{
        font-weight: 500;
        font-size: 14px;
        color: #333333;
    }
    .flex-start{
        display: flex;
        align-items: center;
    }
    .operateText{
        font-weight: 400;
        font-size: 14px;
        color: #333333;
        text-decoration-line: underline;
        line-height: 24px;
        margin-right: 32px;
        cursor: pointer;
    }

    .pageClass{
        display: flex;
        margin-top: 26px;
        justify-content: center;

        .pageClass-first{
            width: 40px;
            height: 32px;
            background: #FFFFFF;
            border-radius: 4px 4px 4px 4px;
            border: 1px solid #EEEEEE;
            font-weight: normal;
            font-size: 14px;
            color: #7A7A7A;
            line-height: 32px;
            text-align: center;
            margin-right: 16px;
            cursor: pointer;
        }

        .pageClass-Last{
            width: 69px;
            height: 32px;
            background: #FFFFFF;
            border-radius: 4px 4px 4px 4px;
            border: 1px solid #EEEEEE;
            font-weight: normal;
            font-size: 14px;
            color: #7A7A7A;
            line-height: 32px;
            text-align: center;
            margin-right:10px;
            cursor: pointer;
        }
        .pageClass-num{
            width: 32px;
            height: 32px;
            background: #FFFFFF;
            border-radius: 4px 4px 4px 4px;
            border: 1px solid #EEEEEE;
            font-weight: normal;
            font-size: 14px;
            color: #7A7A7A;
            line-height: 32px;
            text-align: center;
            margin-right: 10px;
            cursor: pointer;
        }
        .pageShenLue{
            font-weight: normal;
            font-size: 14px;
            color: #7A7A7A;
            margin-right: 10px;
        }

        .active{
            background: #31A41B;
            color: #FFF;
        }
    }









    .shuxing{
        width: 6px;
        height: 18px;
        background: #31A41B;
        border-radius: 3px 3px 3px 3px;
    }

    

    .page-title{
        font-family: PingFang SC, PingFang SC;
        font-weight: 500;
        font-size: 16px;
        color: #333333;
        margin-left: 10px;
    }
    
    .label{
        flex-basis: 144px;
        flex-grow: 0;      /* 禁止放大 */
        flex-shrink: 0;    /* 禁止缩小 */
        text-align: right;
        font-weight: 400;
        font-size: 14px;
        color: #333333;
        margin-right: 10px;
    }
    .companylogo{
        width: 120px;
        height: 74px;
    }
    .renewval{
        width: 100px;
        height: 36px;
        background: #EAF6E8;
        border: 1px solid #31A41B;
        font-weight: bold;
        font-size: 14px;
        color: #31A41B;
        text-align: center;
        line-height: 36px;
        border-radius: 20px;
        margin-top: 11px;
    }
    .name{
        text-align: right;
        font-weight: 400;
        font-size: 14px;
        color: #333333;
    }
    .red{
        color: #E5020D;
    }
    .m-l-27{
        margin-left: 27px;
    }
    .m-l-14{
        margin-left: 14px;
    }
    .justify-between{
        display: flex;
        justify-content: space-between;
        flex-grow: 1;
    }
    .m-t-17{
        margin-top: 17px;
    }
    
    .btnCancel{
        width: 133px;
        height: 40px;
        background: #F5F5F5;
        border-radius: 4px 4px 4px 4px;
        border: 1px solid #D7D7D7;
        font-weight: 400;
        font-size: 14px;
        color: #666666;
        text-align: center;
        line-height: 40px;
        cursor: pointer;
    }

    .btnSave{
        width: 133px;
        height: 40px;
        background: #31A41B;
        border-radius: 4px 4px 4px 4px;
        border: 1px solid rgba(0,0,0,0);
        font-weight: 400;
        font-size: 14px;
        color: #FFFFFF;
        cursor: pointer;
        text-align: center;
        line-height: 40px;
        margin-left: 12px;
    }
    .tips{
        font-weight: 400;
        font-size: 12px;
        color: #999999;
        line-height: 24px;
    }

    .fileIcon{
        width: 20px;
        height: 20px;
        margin-right: 6px;
    }

    .gouxuanIcon{
        width: 12px;
        height: 12px;
    }

   .flex-space-between{
        display: flex;
        align-items: center;
        justify-content: space-between;
    }
    
    .uploadRight{
        display: flex;
        height: 120px;
        align-items: flex-end;
        flex-direction: column;
        justify-content: flex-end;
    }


}


.uploadImg{
    width: 200px;
    height:120px;
}

/deep/.el-input__inner  {
    background: #FAFAFA;
}

/deep/.el-upload-dragger{
    background: #FAFAFA;
    width: 200px;
    height:120px;
    .el-icon-upload{
        font-size: 48px;
        margin:0px;
        margin-top: 16px;
        margin-bottom: 16px;
    }
    .el-upload__text{
        color: #A2A2A2;
    }
    em{
        color: #A2A2A2;
    }
}

/deep/.el-upload-dragger:hover{
    border: 1px solid #FAFAFA;
}

input {
      flex: 2;
      height: 100%;
      padding-left: 16px;
      font-size: 14px;
      color: #000;
      background: #FAFAFA;
      border-radius: 4px 4px 4px 4px;
      border: 1px solid #E6E5E5;
      height: 40px;

      &::-webkit-input-placeholder {
        font-size: 14px;
        font-family: Microsoft YaHei-Regular, Microsoft YaHei;
        font-weight: 400;
        color: #d7d7d7;
      }
    }

    textarea{
        flex: 2;
        height: 100%;
        padding: 16px;
        font-size: 14px;
        color: #000;
        background: #FAFAFA;
        border-radius: 4px 4px 4px 4px;
        border: 1px solid #E6E5E5;
        height: 84px;

       &::-webkit-input-placeholder {
          font-size: 14px;
          font-family: Microsoft YaHei-Regular, Microsoft YaHei;
          font-weight: 400;
          color: #d7d7d7;
        }
    }
    textarea:focus {
      outline: none;
      border: 1px solid #E6E5E5;
    }
</style>